<template>
  <div class="cart_box">
    <van-checkbox-group v-model="result" ref="checkboxGroup" @change="change">
      <van-empty
        image="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604932719549&di=a73a1e647bb45d6fe24c7935e607e8c4&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201907%2F26%2F20190726111337_jagvw.thumb.1000_0.jpeg"
        description="IU"
        v-show="isShow"
      />

      <!-- <van-card
      v-for="(item, index) in $store.state.shopdetail"
      :key="index"
      :price="item.basicInfo.originalPrice"
      desc="描述信息"
      title="商品标题"
      :thumb="item.basicInfo.pic"
    >
    </van-card> -->
      <van-swipe-cell
        v-for="(item, index) in $store.state.shopdetail"
        :key="index"
      >
        <van-checkbox :name="item"></van-checkbox>
        <van-card
          :price="item.basicInfo.originalPrice"
          desc="描述信息"
          title="商品标题"
          class="goods-card"
          :thumb="item.basicInfo.pic"
        >
          <template #footer>
            <van-stepper
              v-model="item.num"
              @plus="plusnum(item.basicInfo.id)"
              @minus="min(item.basicInfo.id)"
            />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(index)"
          />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>

    <van-divider />

    <div class="cart_recommend">猜你喜欢</div>

    <div class="cart_container">
      <div class="cart_item" v-for="item in cart.slice(17, 21)" :key="item.id">
        <img :src="item.pic" alt="" />
        <p class="p_one">{{ item.name }}</p>
        <p class="p_two">￥{{ item.originalPrice }}</p>
      </div>
    </div>

    <van-submit-bar
      :price="$store.getters.allprice * 100"
      button-text="提交订单"
      @submit="goorder"
    >
      <van-checkbox v-model="checked" @click="checkall">复选框</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: [],
      list: [],
      isShow: false,
      result: [],
      checked: false,
    };
  },
  mounted() {
    this.$API.getList().then((res) => {
      console.log(res);
      this.cart = res.data.data;
    });

    var detail = this.$route.query.shopdetail;
    console.log(detail);
    // this.$API.getshopdetail().then(res=>{
    //   console.log(res);
    //   this.list = res.data.data
    // })
  },
  methods: {
    plusnum(id) {
      this.$store.state.shopdetail.forEach((item) => {
        if (item.id == id) {
          item.num++;
        }
      });
    },
    min(id) {
      this.$store.state.shopdetail.forEach((item) => {
        if (item.id == id) {
          item.num--;
        }
      });
    },
    del(index) {
      console.log(index);
      this.$store.state.shopdetail.splice(index, 1);
    },
    change() {
      if (
        this.result.length == this.$store.state.shopdetail.length &&
        this.result.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    checkall() {
      if (this.checked == true) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    goorder(){
      this.$router.push("/myorder")
      // console.log(1111);
    }
  },
};
</script>

<style scoped>
.cart_box {
  width: 100%;
  margin-bottom: 2rem;
}
.cart_recommend {
  width: 100%;
  height: 1rem;
  /* background-color: antiquewhite; */
  text-align: center;
  line-height: 1rem;
}
.cart_container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.cart_item {
  width: 45%;
  height: 6rem;
  /* background-color: aqua; */
  margin-top: 0.2rem;
}
.cart_item img {
  width: 100%;
  height: 4.5rem;
}
.cart_item .p_two {
  color: red;
}
.van-submit-bar {
  margin-bottom: 1rem;
}
.goods-card {
  /* margin: 0;
  background-color: @white; */
  margin: 0;
  /* background-color: @white; */
}

.delete-button {
  height: 100%;
}
</style>